<template>
  <div 
  v-if="payInfo"
  class="home-cashier-wrap" >
    <van-nav-bar
        title="收银台"
        left-arrow
        fixed
        @click-left="onClickLeft"
    />

    <div class="pay-price" >{{ payInfo.title }}</div>
    <div class="pay-val" >{{ payInfo.amount_text }}</div>
    <div class="pay-time" >
        {{ payInfo.expired_desc }}
        <van-count-down
        :time="payInfo.expired_seconds * 1000"
        @finish="finish"
        />
    </div>

    <!-- 支付方式 -->
    <div
    class="pay-methods"
    >
    <div class="youhui_pay" v-if="payInfo.msg==1 && patInfo.coupon_payed>0">
                <div>现金消费券抵扣</div>
                <div>本次现金消费券可抵扣：¥{{payInfo.coupon_payed || 0}}，还需支付：¥{{ payInfo.amount_text }}</div>
            </div>
        <div 
        v-for="(item, index) in payInfo.methods"
        :key="index"
        @click="handleToChange(index)"
        class="pay-methods-li" >
            <img class="pay-methods-li-icon" :src="item.icon" alt="">
            <div class="pay-desc" >
                <div class="pay-desc-name" >{{ item.title }}</div>
                <div class="pay-desc-info" >{{ item.desc }}</div>
            </div>

            <img class="pay-select" :src="current === index ? defaultTagIcon : defaultCircle" alt="">
        </div>

    </div>


    <div 
    @click="handleToPay"
    class="btn-pay active-btn" >{{ payInfo.methods[current].button_text }}</div>



    <!-- 余额支付 -->
    <balance-pay-popup
    v-if="showPayPopup"
    ref="transferPayPopup"
    @refreshData="handleRefreshData"
    ></balance-pay-popup>

  </div>
</template>

<script>
import { ORDER_CREATE } from '@/api/mine';
import { defaultTagIcon, defaultCircle } from '@/tool/static-img';
import balancePayPopup from './components/balance-pay-popup';
export default {
    components: {
        balancePayPopup
    },
    data() {
        return {
            defaultTagIcon, defaultCircle,
            // order_id: this.$route.query.order_id,
            payInfo: JSON.parse(localStorage.getItem('cashOrder')),
            current: 0,

            // 余额支付
            showPayPopup: false,

        }
    },
    created() {
        // console.log()
        this.patInfo=JSON.parse(localStorage.getItem('cashOrder'))
    },
    methods: {
        onClickLeft() {
            this.$router.back()
        },
        handleToChange(index) {
            this.current = index;
        },
        finish() {
            this.$router.replace({
                name: 'order'
            })
        },
        // 去支付
        handleToPay() {
            if(this.payInfo.methods[this.current].type === 'APP_BALANCE_CASH') {
                // 余额支付
                this.showPayPopup = true;
                this.$nextTick(() => {
                    this.$refs['transferPayPopup'].initData(this.patInfo);
                })
            }else {
                let params={
                    business_id: this.payInfo.business_id,
                    business_type: this.payInfo.business_type,
                    price:this.payInfo.amount,
                    channel_id:this.payInfo.methods[this.current].type,
                    product_code:this.payInfo.methods[this.current].product_code,
                    return_url: location.href.split('#')[0] + '#/payResult'
                }
                this.$http.post(ORDER_CREATE,params).then(res=>{
                    if(res.data.payment_data.startsWith('http')){
                            // console.log(res.data.payment_data);
                            let data={
								business_trade_no: this.payInfo.business_trade_no,
                                business_type:this.payInfo.business_type,
                                pay_title:this.payInfo.methods[this.current].title,
                                price:this.payInfo.amount
                            }
                            localStorage.setItem("orderResult", JSON.stringify(data))
                            location.href=res.data.payment_data
                            
                        }
                })
                // location.href = '';
            }
        },
        // 余额支付结束
        handleRefreshData() {
			let data={
				business_trade_no: this.payInfo.business_trade_no,
			    business_type:this.payInfo.business_type,
			    pay_title:this.payInfo.methods[this.current].title,
			    price:this.payInfo.amount
			}
			localStorage.setItem("orderResult", JSON.stringify(data))
            this.$router.back()
        }
    }

}

</script>
<style lang="scss" >
.home-cashier-wrap{
    position: relative;
    min-height: 100vh;
    padding-top: 46px;
    background-color: #f4f4f4;
    padding-bottom: calc(1.2rem + constant(safe-area-inset-bottom));
    padding-bottom: calc(1.2rem + env(safe-area-inset-bottom));
    box-sizing: border-box;
    .van-nav-bar .van-icon{
        color: #333333;
    }
    .van-nav-bar__arrow{
        font-size: 20px;
    }
    .van-hairline--bottom::after{
        display: none;
    }

    .pay-price{
        height: 0.44rem;
        margin-top: 0.72rem;
        font-weight: 500;
        font-size: 0.32rem;
        line-height: 0.44rem;
        text-align: center;
    }
    .pay-val{
        height: 1rem;
        line-height: 1rem;
        font-weight: 500;
        font-size: 0.72rem;
        color: #F32A23;
        text-align: center;
        &::before{
            content: '¥';
            font-size: 0.48rem;
        }
    }
    .pay-time{
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.28rem;
        color: #999999;
        .van-count-down{
            color: #999999;
        }
    }
    .pay-methods{
        margin-top: 0.88rem;
        .youhui_pay {
            position: relative;
            width: 6.86rem;
            height: 1.44rem;
            margin: auto;
            margin-bottom: 0.24rem;
            border-radius: 0.16rem;
            background: #ffffff;
            padding: .32rem;
            box-sizing: border-box;
            background: url('../../../images/mine/youhui_bg2.png') no-repeat;
            background-position: center;
            background-size: cover;
            div:first-child {
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                font-size: .32rem;
                color: #333333;
                line-height: .44rem;
                text-align: left;
                font-style: normal;
            }

            div:last-child {
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                font-size: .24rem;
                color: #FF6200;
                line-height: .34rem;
                text-align: left;
                font-style: normal;
                margin-top: .12rem;
            }
        }
        .pay-methods-li{
            position: relative;
            display: flex;
            align-items: center;
            width: 6.86rem;
            height: 1.52rem;
            margin: auto;
            margin-bottom: 0.24rem;
            border-radius: 0.16rem;
            background: #ffffff;
            .pay-select{
                position: absolute;
                right: 0.4rem;
                top: 0;
                bottom: 0;
                margin: auto;
                width: 0.4rem;
                height: 0.4rem;
            }
            .pay-methods-li-icon{
                width: 0.8rem;
                height: 0.8rem;
                margin-left: 0.36rem;
            }
            .pay-desc{
                margin-left: 0.28rem;
                .pay-desc-name{
                    height: 0.44rem;
                    margin-bottom: 0.06rem;
                    line-height: 0.44rem;
                    font-weight: 500;
                    font-size: 0.32rem;
                    color: #333333;
                }
                .pay-desc-info{
                    height: 0.34rem;
                    line-height: 0.34rem;
                    font-weight: 400;
                    font-size: 0.24rem;
                    color: #999999;
                }
            }
        }
    }

    .btn-pay{
        position: fixed;
        bottom: calc(0.24rem + constant(safe-area-inset-bottom));
        bottom: calc(0.24rem + env(safe-area-inset-bottom));
        left: 0;
        right: 0;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 6.86rem;
        height: 0.88rem;
        font-weight: 500;
        font-size: 0.32rem;
        color: #ffffff;
        border-radius: 0.44rem;
        background: linear-gradient( 135deg, #FF5851 0%, #E9011B 100%);
    }
}
</style>